<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>结果:</div>
<script>
  let l=document.querySelector("#i1");
  let c=document.querySelector("#i2")
  let m=document.querySelector("div")
  function f(x) {
    if (isNaN(l.value)||isNaN(c.value)) {
        m.innerText = "输出错误";
        return;
    }
      switch (x) {
        case 1:
          m.innerText = "结果:" + (parseFloat(l.value) + parseFloat(c.value));
          break;
        case 2:
          m.innerText = "结果:" + (l.value - c.value);
          break;
        case 3:
          m.innerText = "结果:" + l.value * c.value;
          break;
        case 4:
          m.innerText = "结果:" + l.value / c.value;
      }


  }

</script>
</body>
</html>